<template>
    <div class="uploadbox">
      <div class="boxx">
     <el-card class="box-card">
        <template #header>
         <div class="card-header">
        <span>已上传文件</span>
      </div>
       </template>
       <el-empty description="未上传文件" v-if="upflieInfo.filesQ.length<=0&&upflieInfo.filesS<=0" :image-size="100" />
       <div v-for="(item,index) in upflieInfo.filesQ" :key="index" class="text item">
          <div class="max-width">{{ item.showName }}</div>
          <div><span style="font-size: 18px;margin-right: 10px;color: darkgray;">区级上传</span><el-button  class="downBth" @click="downFile(item)"  type="primary">下载</el-button><el-button  class="downBth" @click="deleteFile(item)" v-if="showDete"  type="danger">删除</el-button></div>
       </div>
       <div v-for="(item,index) in upflieInfo.filesS" :key="index" class="text item">
          <div>{{ item.showName }}</div>
          <div><span style="font-size: 18px;margin-right: 10px;color: darkgray;">市级上传</span><el-button  class="downBth" @click="downFile(item)"  type="primary">下载</el-button><el-button  class="downBth" @click="deleteFile(item)" v-if="showDete"  type="danger">删除</el-button></div>
       </div>
       </el-card> 
           </div>
        <el-upload
    v-if="users!='1'"    
    ref="uploadRef"
    class="upload-demo"
    :action="action"
    :headers="headers"
    :auto-upload="false"
    :on-success="successFile"
    name="files"
    >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
    <el-button class="ml-3" type="success" style="margin-left: 20px;" @click="submitUpload">
     确认上传
    </el-button>
  </el-upload>
      </div>
</template>
<script lang="ts" setup>
    import { useStore } from '@/store'
    import {upReport,reportfindById,deleteExport} from "@/util/api";
    import type { UploadInstance } from 'element-plus'
    import { ElMessage,ElMessageBox} from "element-plus"
    import {ref,watch} from 'vue'
    const uploadRef = ref<UploadInstance>()
    const store = useStore()
    const users = store.state.userInfo.userRole
    const upflieInfo:any=ref({
        filesQ:[],
        filesS:[],
        id:''
    })
    const filesNum:any = ref(0)
    const isFile :any = ref(0)
    const showDete:any = ref(true)
    const action = '/api/file/upload'
    const headers ={headers:sessionStorage.getItem('token'),
                  Authorization:sessionStorage.getItem('token')}
    const props = defineProps({
      id:String,
      filesQ:String,
      filesS:String,
    })
    watch(
    ()=>props,
    (newValue:any)=>{
        upflieInfo.value.id=newValue.id 
        getFiles()
    },
    {deep:true},
    )
    const downFile= async (item:any)=>{
    let link = document.createElement('a')
    link.style.display = 'none';
    link.href = '/api/file/show/'+item.saveName;
    link.download = item.showName;
    link.click()
    window.URL.revokeObjectURL(link.href)
}
    //获得当前报表的已上传列表
    const submitUpload = () => {
      filesNum.value = document.getElementsByClassName('el-upload-list__item').length
      uploadRef.value!.submit()
   }
   const successFile =(response:any,uploadFile: any, uploadFiles:any)=>{
    console.log(response)
      if(response){
       let data = {
	     "showName": uploadFile.name,
	     "saveName": response,
	     "time": getCurrentTime()
       }
      if(users=='2'){
           upflieInfo.value.filesS.push(data)
      }else{
           upflieInfo.value.filesQ.push(data)
      }
      }
      isFile.value ++
      if(isFile.value==filesNum.value){
        let data = {
            filesQ:upflieInfo.value.filesQ==''?null:JSON.stringify(upflieInfo.value.filesQ),
            filesS:upflieInfo.value.filesS==''?null:JSON.stringify(upflieInfo.value.filesS),
            id:upflieInfo.value.id
        }     
        // console.log(data)
        upReport(data).then((res:any)=>{
            if(res.code!='200')return 
            ElMessage.success('上传成功')
            getFiles()
        })
      }
   }
   const getFiles = async()=>{
    const res:any =await  reportfindById(upflieInfo.value.id)
    console.log(res)
    if(res.code!='200') return
    if(res.data.filesQ!=null)upflieInfo.value.filesQ = JSON.parse(res.data.filesQ)
    if(res.data.filesS!=null)upflieInfo.value.filesS = JSON.parse(res.data.filesS)
    // console.log(upflieInfo.value)
    if(res.data.rState!='1' ){showDete.value = false}else{showDete.value = true}
   }
   //删除文件
   const deleteFile = (item:any)=>{
    ElMessageBox.confirm(
    '确定永久删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async() => {
    
    let data = {
      id:upflieInfo.value.id,
      saveName:item.saveName
    }
    console.log(data)
    let res:any = await deleteExport(data)
    console.log(res)
    if(res.code!='200')return
      ElMessage({
        type: 'success',
        message: '已删除',
      })
      getFiles()
    })
    .catch(() => {

    })
   }
  const getCurrentTime=() =>{
    var date = new Date();//当前时间
    var year = date.getFullYear() //返回指定日期的年份
    var month = repair(date.getMonth() + 1);//月
    var day = repair(date.getDate());//日
    var hour = repair(date.getHours());//时
    var minute = repair(date.getMinutes());//分
    var second = repair(date.getSeconds());//秒
    //当前时间 
    var curTime = year + "-" + month + "-" + day
            + " " + hour + ":" + minute + ":" + second;
    return curTime;
}
 
//补0
 
const repair=(i:any)=>{
    if (i >= 0 && i <= 9) {
        return "0" + i;
    } else {
        return i;
    }
}
</script>
<style scoped>
.uploadbox{
    width: 100%;
    display: flex;
}
  .boxx{
   margin-right: 20px;
}
.downBox{
   width: 200px;
   background-color: red;
   min-height: 600px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: space-between;
}

.box-card {
  min-width: 480px;
}
.max-width{
  width: 400px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 这里是超出几行省略 */
  overflow: hidden;
}
</style>